<template>
  <van-popup v-if="name" v-model="show" position="right">
    <van-panel title="配送至"></van-panel>
    <van-cell>
      <van-row :gutter="10">
        <van-col span="8" v-for="value in 10" :key="value">
          <van-button type="default">自定义</van-button>
        </van-col>
      </van-row>
    </van-cell>
    <van-panel class="add" title="分类" status="全部分类"></van-panel>
    <van-panel title="价格"></van-panel>
    <van-cell class="add2">
      <van-row :gutter="10">
        <van-col class="jiage1">
          <van-button class="jiage" type="default">自定义</van-button>——
          <van-button class="jiage" type="default">自定义</van-button>
          <van-col span="8" v-for="value in 3" :key="value">
            <van-button class="jiage2" type="default">自定义dvdv</van-button>
          </van-col>
        </van-col>
      </van-row>
    </van-cell>
    <van-panel title="品牌"></van-panel>
    <van-cell class="add2">
      <van-row :gutter="10">
        <van-col span="8" v-for="value in 9" :key="value">
          <van-button type="default">自定义</van-button>
        </van-col>
      </van-row>
    </van-cell>
    <van-panel title="分类"></van-panel>
    <van-cell class="add2">
      <van-row :gutter="10">
        <van-col span="8" v-for="value in 9" :key="value">
          <van-button type="default">自定义</van-button>
        </van-col>
      </van-row>
    </van-cell>
    <van-panel title="运行内存"></van-panel>
    <van-cell class="add2">
      <van-row :gutter="10">
        <van-col span="8" v-for="value in 8" :key="value">
          <van-button type="default">自定义</van-button>
        </van-col>
      </van-row>
    </van-cell>
    <van-nav-bar title="清除选项" left-arrow />
    <van-button class="add3" type="default">取消</van-button>
    <van-button class="add4" type="default">确认</van-button>
  </van-popup>
</template>
<style lang="less" scoped>
.van-popup {
  width: 80%;
  height: 100%;
  background-color: #f4f4f4;
}
.add,
.add1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.van-icon-arrow-left:before {
  content: "";
}
.content {
  margin-top: 10;
}
.van-col button {
  background-color: #f4f4f4;
}
.van-button {
  height: 20px;
  line-height: 10px;
}
.van-cell {
  margin-top: 10px;
}
.van-panel__header-value {
  color: #ccc;
}
.van-nav-bar {
  margin-top: 10px;
}
.add2 {
  margin: 0;
}
.van-nav-bar {
  margin: 15px 10px 15px 10px;
}
.add3,
.add4 {
  height: 46px;
  width: 50%;
}
.add4 {
  background-color: #57c43c;
}
.van-button--normal {
  font-size: 12px;
}
.jiage1 {
  width: 100%;
  margin-bottom: 5px;
}
.jiage {
  width: 40%;
  height: 46px;
}
.jiage2 {
  height: 46px;
}
</style>